import { React, useRef } from "react";
import "./index.css";
import "../../../index.css";
import { useLocation /* , useNavigate */ } from "react-router-dom";
import InterIP from "../../../IP/IP";
import axios from "axios";

export default function ChangeAddress() {
  let IP = InterIP().props.children;
  const data = useLocation();
  const changeName = useRef();
  const changearea = useRef();
  const changestreet = useRef();
  const changephone = useRef();
  const changecomment = useRef();
  // const navigate = useNavigate();

  var newArr = data.state.newArr;

  console.log(newArr);
  function changeSite() {
    var userID = document.cookie.slice(5);
    axios
      .post("http://" + IP + ":3000/user/updateAddress", {
        consignee: changeName.current.value,
        area: changearea.current.value,
        street: changestreet.current.value,
        contact_phone: changephone.current.value,
        comment: changecomment.current.value,
        user_id: userID,
        default_address: "1",
        address_id: data.state.data.address_id,
      })
      .then((res) => {
        console.log(res);
        window.history.back();
      });
  }

  return (
    <div id="mybill">
      <div className="mybill_top">编辑地址</div>
      <div className="augment_main">
        <ul className="tyc_area">
          <li>
            <span>*</span>
            <strong>收货人姓名：</strong>
            <input
              type="text"
              placeholder="收货人姓名"
              defaultValue={data.state.data.consignee}
              ref={changeName}
            />
          </li>
          <li>
            <span>*</span>
            <strong>选择地区：</strong>
            <input
              type="text"
              placeholder="收货人地区"
              defaultValue={data.state.data.area}
              ref={changearea}
            />
          </li>
          <li>
            <span>*</span>
            <strong>详细地址：</strong>
            <input
              type="text"
              placeholder="用于接收货物的详细地址"
              defaultValue={data.state.data.street}
              ref={changestreet}
            />
          </li>
          <li>
            <span>*</span>
            <strong>联系电话：</strong>
            <input
              type="text"
              placeholder="推荐使用手机号"
              defaultValue={data.state.data.contact_phone}
              ref={changephone}
            />
          </li>
          <li>
            <span>*</span>
            <strong>备注信息：</strong>
            <input
              type="text"
              placeholder="输入备注"
              defaultValue={data.state.data.comment}
              ref={changecomment}
            />
          </li>
        </ul>
        <button className="augment_button" onClick={changeSite}>
          确定修改
        </button>
      </div>
    </div>
  );
}
